<template>
	<view>
		<uni-nav-bar shadow :title="title" @clickLeft="back" height="88rpx" :border="false" :fixed="true"
			backgroundColor="#FFFFFF" :shadow="false" left-icon="left"></uni-nav-bar>
		<view class="container">
			<view style="position: relative;">
				<video id="myVideo" @loadeddata="loadeddata" @loadedmetadata='loadedmetadata'
					@fullscreenchange='fullscreenchange' @timeupdate='playTimes' :src="src" v-if="NowFocus==0"
					@error="videoErrorCallback" controls>
					<view class="head-top">
						<image class="image" src="../../static/images/yicha/logo.png" mode=""></image>
					</view>
					<view class="video-infor">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view>
					<!-- <view v-if="type=='courses'" class="video-infor-2">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view> -->
				</video>
				<video id="myVideo1" @loadeddata="loadeddata" @loadedmetadata='loadedmetadata'
					@fullscreenchange='fullscreenchange' @timeupdate='playTimes' v-if="NowFocus==1" :src="src"
					@error="videoErrorCallback" controls>
					<view class="video-infor">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view>
					<!-- <view class="video-infor-2">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view> -->
				</video>
				<video id="myVideo2" @loadeddata="loadeddata" @loadedmetadata='loadedmetadata'
					@fullscreenchange='fullscreenchange' @timeupdate='playTimes' v-if="NowFocus==2" :src="src"
					@error="videoErrorCallback" controls>
					<view class="video-infor">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view>
					<!-- <view class="video-infor-2">
						<view class="left">
							<text>{{user.sign}}</text>
							<text>用户名：{{user.username}}</text>
							<text>电话：{{user.mobile}}</text>
						</view>
						<view class="right">
							<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
							</image>
						</view>
					</view> -->
				</video>

				<view class="video-tel" ref="videoTel">{{user.mobile}}</view>
				<!-- <view class="video-infor" v-if="showName">
					<view class="left">
						<text>{{user.sign}}</text>
						<text>用户名：{{user.username}}</text>
						<text>电话：{{user.mobile}}</text>
					</view>
					<view class="right">
						<image style="width:100rpx;background-color: #eeeeee;" mode="widthFix" :src="user.avatar">
						</image>
					</view>
				</view> -->
			</view>
			<view class="detail-info">
				<u-parse :html="detailInfoList[NowFocus]"></u-parse>
			</view>
			<view class="List" v-show="type=='courses'">
				<view v-for="(i,n) in List" @click="changeActive(n)" :key='n' :class="n==NowFocus?'active':''">
					{{i}}
				</view>
			</view>
		</view>
		<share-modal :userid='shoreId' ref="ShareModal"></share-modal>
		<uni-popup is-mask-click='false' :mask-click='false' style="background-color:rgba(0,0,0,.4); z-index: 101;" id="SureSubmit"
			ref="SureSubmit" type="dialog">
			<view class="floatcontainer">
				<view class="text">
					暂无授权,授权后方可查看,请联系客服18926048918
					<text class="know" @click="readkonw">阅读须知</text>
				</view>

				<view class="btnContainer">
					<button type="default" @click="$wanlshop.back(1)">关闭</button>
					<!-- 			<button type="primary" @click="buy()"
						style="background: #8CBF6B;color: #fff;">购买</button> -->
				</view>
			</view>
		</uni-popup>
		<uni-popup is-mask-click='true' :mask-click='true' style="background-color:rgba(0,0,0,.4); z-index: 101;" id="SureSubmit2"
			ref="SureSubmit2" type="dialog">
			<view class="floatcontainer floatcontainer2">
				<scroll-view class="infor" scroll-y="true">
					<view v-html="konwInfor"></view>
				</scroll-view>
				<view class="btnContainer">
					<button type="default" @click="closeKnow">关闭</button>
				</view>
			</view>
		</uni-popup>
		<view v-show="!isSharePage" @tap="$wanlshop.auth('/pages/teacher/userCard')" class="changeCardBtn">
			更改名片
		</view>
		<ad-modal ref="adModal" :adInfo='adInfo' @jumpAd='jumpAd'></ad-modal>
	</view>

</template>

<script>
	import jssdk from '@/common/libs/jssdk';
	import share from '@/shopro/share/index.js'
	import shareModal from '@/pages/teacher/components/shareModal.vue'
	import adModal from '@/pages/teacher/components/adModal.vue'
	export default {
		components: {
			shareModal,
			adModal
		},
		data() {
			return {
				username: '',
				id: '',
				title: '',
				AllList: [],
				currentPage: '1',
				src: '',
				NowFocus: 0,
				List: ['PPT', '动画', '茶手工'],
				pptVideo: '',
				handworkVideo: "",
				cartoonVideo: "",
				type: '',
				videoContext1: {},
				videoContext: {},
				videoContext2: {},
				package_vip: '',
				isSharePage: false,
				user: "",
				konwInfor: '',
				timeOut: null,
				playTime: 0,
				showName: true,
				shorePic: '',
				shoreDescList: {},
				shoreId: '',
				adInfo: {},
				freeTimeList: '',
				detailInfoList: {},
				videoInfo: {},
				hideAd: true,
			}
		},
		async onLoad(option) {
			console.log(666, this.$u.os())
			if (location.href.indexOf('isShare=true') !== -1) {
				this.isSharePage = true
				this.shoreId = option.userid
			}
			console.log(option)
			this.id = option.id;
			this.title = option.name;
			this.type = option.type
			this.user = uni.getStorageSync('userInfo')
			console.log('user', this.user)
			let shareId = uni.getStorageSync('userInfo').id
			await this.getList()
			await this.getKnow()



		},
		onShow() {
			this.$refs.ShareModal.loadCard();

		},
		onReady() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '未登录,即将跳转登录页',
					icon: "error"
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/user/auth/auth'
					})
				}, 1000)
			}


		},
		onHide() {
			uni.hideLoading()
		},
		watch: {
			playTime(val, up) {
				if (val === 0) {
					// uni.showLoading({
					// 	title: "加载中..."
					// })
				} else {
					setTimeout(() => {
						uni.hideLoading()
					}, 1000)

				}
			}
		},
		methods: {
			// fullscreenchange(e) {
			// 	console.log(e.detail)
			// 	if (e.detail.fillScreen) {
			// 		this.showName = false
			// 	}
			// },
			// loadeddata() {
			// 	uni.showLoading({
			// 		title: "加载中..."
			// 	})
			// },
			loadedmetadata(e) {
				this.playTime = e.detail.duration
			},
			readkonw() {
				this.$refs.SureSubmit2.open()
			},
			closeKnow() {
				this.$refs.SureSubmit2.close()
			},
			changeLocal() {
				this.$refs.videoTel.$el.style.top = Math.random() * 180 + 'px';
				this.$refs.videoTel.$el.style.left = Math.random() * 300 + 'px';
			},
			getKnow() {
				var that = this;
				this.$api.post({
					url: '/index/index'
				}).then(res => {
					console.log('know', res)
					that.konwInfor = res.impower_xieyi
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getShareInfo() {
				this.$api.post({
					url: '/topic/shareInfo'

				}).then(res => {
					console.log(res)
					return res
				})
			},
			jumpAd(val) {
				console.log(val)
				this.hideAd = val
			},
			playTimes(e) {
				var currentime = e.detail.currentTime
				if(this.type != 'courses'){
					let ads = this.videoInfo.news_list
					ads.forEach(item => {
						if (Number(item.seconds) <= currentime && this.hideAd) {
							uni.createVideoContext('myVideo').pause()
							uni.createVideoContext('myVideo').exitFullScreen()
							this.$refs.adModal.showModal(item)
							return
						}
					})
				}
				
				if (currentime >= this.freeTimeList[this.NowFocus] && this.type == 'courses' && this.package_vip == '0') {
					uni.createVideoContext('myVideo').exitFullScreen()
					uni.createVideoContext('myVideo1').exitFullScreen()
					uni.createVideoContext('myVideo2').exitFullScreen()
					this.$refs.SureSubmit.open()
					uni.createVideoContext('myVideo').pause()
					uni.createVideoContext('myVideo1').pause()
					uni.createVideoContext('myVideo2').pause()
				}
			},
			getList() {
				console.log(this.id)
				let url = this.type == 'courses' ? '/course/detail' : this.type == 'study' ? '/study/detail' : ''
				var that = this;
				this.$api.post({
					url: url,
					data: {
						id: this.id
					},
					// contentType: 'application/json',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					// dataType:'json',
					success: (res) => {
						console.log('res', res);
						this.videoInfo = res
						this.adInfo = res.news_list
						this.package_vip = res.package_vip
						// this.freeTime = res.seconds || ''
						this.shorePic = res.image
						if (this.type == 'courses') {
							this.pptVideo = res.PPT_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
							this.handworkVideo = res.handwork_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
							this.cartoonVideo = res.cartoon_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
							this.shoreDescList = [ res.ppt_desc, res.cartoon_desc, res.handwork_desc,]
							this.detailInfoList = [ res.ppt_content, res.cartoon_content, res.handwork_content,]
							this.freeTimeList = [res.ppt_seconds, res.cartoon_seconds, res.handwork_seconds, ]
						} else {
							this.pptVideo = res.teach_file.video_url.PlayInfoList.PlayInfo[0].PlayURL
							this.shoreDescList = [res.desc]
							this.detailInfoList = [res.content]
						}

						this.src = this.pptVideo // 		this.AllList = res.list;
						this.videoContext = uni.createVideoContext('myVideo')
						this.videoContext1 = uni.createVideoContext('myVideo1')
						this.videoContext2 = uni.createVideoContext('myVideo2')
						this.changeLocal();
						if (that.timeOut) {
							that.timeOut = null
						} else {
							that.timeOut = setInterval(that.changeLocal, 3200)
						}

						// 分享
						let shareId = uni.getStorageSync('userInfo').id
						let res1 = share.setShareInfo({
							title: this.title,
							desc: this.shoreDescList[this.NowFocus],
							image: this.shorePic,
							params: {
								page: 2,
								pageId: this.id,
								shareId: shareId
							}
						});
						let url = window.location.href.split('&')
						let link = url[0] + url[1] + url[2] + '&isShare=true&userid=' + shareId + '&' + res1
							.query
						jssdk.share({
							title: this.title,
							desc: this.shoreDescList[this.NowFocus],
							// link:encodeURIComponent(link),
							link: link,
							imgUrl: this.shorePic,
							type: this.type == 'courses' ? '1' : '5',
							id: this.id
						})
					},
					fail: error => {
						if (this.isSharePage) {
							uni.navigateTo({
								url: '/pages/user/auth/auth'
							})
						} else {
							this.$wanlshop.back(1)
						}
						console.log(error)
					}
				})
				if (this.playTime == 0 && this.$u.os()!="ios") {
					setTimeout(() => {
						uni.showLoading({
							title: "视频加载中...",
							mask: true
						})
					}, 1000)
				}
			},
			changeActive(n) {
				if (n == 0) {
					this.videoContext.play();
					this.videoContext1.pause();
					this.videoContext2.pause();

				} else if (n == 1) {
					this.videoContext1.play();
					this.videoContext.pause();
					this.videoContext2.pause();
				} else {
					this.videoContext2.play();
					this.videoContext.pause();
					this.videoContext1.pause();
				}
				console.log(n)
				this.NowFocus = n
				this.src = n == 0 ? this.pptVideo : n == 1 ? this.cartoonVideo : this.handworkVideo
			},
			videoErrorCallback() {

			},
			wanlShare(item) {
				// console.log(item)
				let shareId = uni.getStorageSync('userInfo').id
				let res = share.setShareInfo({
					title: item.name,
					desc: '',
					image: item.image,
					params: {
						page: 2,
						pageId: item.id,
						shareId: shareId
					}
				});
				console.log('设置分享', res)
				// this.showShare = true;
				let link = window.location.href + '?type=study&id=' + item.id +
					'&name=' + item.name + '&' + res.query

				jssdk.share({
					title: item.name,
					desc: "",
					// link:encodeURIComponent(link),
					link: link,
					imgUrl: item.image
				})
				uni.showToast({
					title: '请点击右上角进行分享',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {

		#myVideo,
		#myVideo1,
		#myVideo2 {
			width: 100%;
			height: 422rpx;
		}
		
		/deep/.uni-video-bar{
			z-index: 100;
		}
		
		.detail-info{
			margin: 20rpx 20rpx;
			min-height: 100rpx;
			padding: 20rpx;
		}

		.video-tel {
			position: absolute;
			left: -100%;
			top: -100%;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.6);
			line-height: 40rpx;
			z-index: 99;
			opacity: 0.65;
			transition: 3s;
		}

		.head-top {
			position: absolute;
			height: 60rpx;
			width: 60rpx;
			top: 20rpx;
			left: 20rpx;
			color: #fff;
			.image{
				width: 60rpx;
				height: 60rpx;
			}
		}

		.video-infor {
			position: absolute;
			left: 20rpx;
			bottom: 20rpx;
			min-width: 250rpx;
			font-size: 24rpx;
			color: #333;
			line-height: 30rpx;
			z-index: 99;
			padding-left: 30rpx;

			.left {
				background-color: #aed0fd;
				color: #333;
				padding: 10rpx;
				border-radius: 120rpx;
				// margin-left: 10rpx;
				// padding-right: 80rpx;

				text {
					display: block;
					font-size: 18rpx;
					line-height: 25rpx;
					margin-left: 50rpx;
				}
			}

			.right {
				position: absolute;
				left: 0;
				border-radius: 50%;
				overflow: hidden;
				bottom: 0;
				width: 80rpx;
				height: 80rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}

		.video-infor-2 {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			min-width: 300rpx;
			font-size: 24rpx;
			color: #333;
			line-height: 30rpx;
			z-index: 99;
			padding-left: 30rpx;

			.left {
				background-color: #aed0fd;
				color: #333;
				padding: 10rpx;
				border-radius: 120rpx;
				margin-right: 10rpx;
				// padding-right: 80rpx;

				text {
					display: block;
					font-size: 18rpx;
					line-height: 25rpx;
					margin-left: 0rpx;
					margin-right: 60rpx;
				}
			}

			.right {
				position: absolute;
				right: 0;
				border-radius: 50%;
				overflow: hidden;
				bottom: 0;
				width: 80rpx;
				height: 80rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}
	}

	.List {
		display: flex;
		text-align: center;
		line-height: 43px;
		justify-content: space-around;
		margin-top: 40rpx;

		view {
			font-size: 14px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			width: 220rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 6rpx;
			opacity: 1;
			border: 1px solid #DDDDDD;


		}

		.active {
			border: 2rpx solid #D6483D;
		}

	}

	.floatcontainer {
		width: 630rpx;
		height: 320rpx;
		background: #fff;
		border-radius: 20rpx;
		margin: 400rpx auto;
		padding-top: 72rpx;

		&.floatcontainer2 {
			min-height: 320rpx;
			height: auto;
			padding: 60rpx 0;
			margin: 200rpx auto;
		}

		.know {
			display: block;
			color: #666;
			text-decoration: underline;
			margin-top: 10rpx;
		}

		.infor {
			padding: 0 20rpx;
			max-height: 50vh;
			min-height: 100rpx;
			overflow-y: auto;
			margin-bottom: 20rpx;
		}
	}

	.text {
		margin: 0 auto 44rpx;
		text-align: center;
	}

	.btnContainer {
		display: flex;
		justify-content: space-around;

		button {
			width: 100px;
			height: 30px;
			background: #fff;
			font-size: 13px;
			font-family: PingFang-SC-Medium-, PingFang-SC-Medium;
			font-weight: normal;
			color: #333333;
		}
	}

	.changeCardBtn {
		width: 538rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #98E05F, #0DE3AC);
		box-shadow: 0px 2px 5px 0px rgba(30, 36, 34, 0.3);
		border-radius: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		bottom: 30rpx;
		margin: auto;
		left: 0;
		right: 0;
	}
</style>
